<template>
    <Modal v-model="show" title="加入黑名单" :width="700" :before-close="closeWin">
        <Form ref="validForm" :model="formData" :rules="ruleValidate">
            <FormItem label="加入黑名单原因" label-position="top" prop="reason" :error="error.reason">
                <Input type="textarea" v-model="formData.reason" :rows="4" placeholder="请输入加入黑名单原因"/>
            </FormItem>
        </Form>

        <template #footer>
            <Button style="margin-right: 8px" @click="closeWin">关闭</Button>
            <Button type="primary" :loading="loading" @click="handleForm">保存</Button>
        </template>
    </Modal>
</template>

<script setup>

import {ref, reactive} from 'vue'

const props = defineProps({
    modelValue: {
        type: Boolean, required: true
    },
    row: {
        type: Object, required: true ,
    }
});

const loading = ref(false); // 加载状态

const show = ref(props.modelValue) ; // 窗口的状态

const formData = ref({reason: props.row.reason, id: props.row.id}) ;

const ruleValidate = reactive({
    reason: [
        {required: true, message: "原因不能为空" ,trigger: "blur"}, 
    ],
}) ;

const emits = defineEmits(["update:model-value"]) ;

const validForm = ref(null);  

const error = ref({}) ;  // 定义后端接口返回的错误信息

function handleForm() {
    loading.value = true ; 
    error.value = {} ; // 重置错误消息
    validForm.value.validate(valid => {
         if (valid) {
            // 保存数据， 成功后，关闭 loading            

         }else{
            loading.value = false;
         }
    })
}

function closeWin() {
    show.value = false; 
    emits("update:model-value", show.value) ;
    validForm.value.resetFields(); 
    error.value = {} ; 
}

</script>
